<template>
	<div id="J_ContBox" class="m-content-box">
		<div class="m-set-order-box">
			<h3 class="title">预约时间设置</h3>

			<router-link to="/system/orderRuleSettingForPrivate">
				<el-button class="set-order-edit bac6b7" type="primary">编辑</el-button>
			</router-link>

			<ul class="set-normal-list mb-30">
				<li>
					<span class="label">预约方式</span>
					<p class="desc">{{datalist.private_mode === 1?'排课预约模式':'自由预约模式'}}</p>
				</li>
				<li>
					<span class="label">私教预约</span>
					<p class="desc">
						每天{{datalist.res_hour1}}:{{datalist.res_minute1}}至{{datalist.res_hour2}}:{{datalist.res_minute2}}接受自主预约
					</p>
				</li>
				<li v-if="datalist.private_mode === 2">
					<span class="label">私教预约</span>
					<p class="desc">老师空闲时间可预约，会员需早于开课前{{datalist.advance1}}分钟自主预约</p>
				</li>
				<li v-if="datalist.private_mode === 2">
					<span class="label">私教预约</span>
					<p class="desc">课前休息{{datalist.course_before}}分钟,课后休息{{datalist.course_after}}分钟。每30分钟一个时间段</p>
				</li>
			</ul>
			<h3 class="title">签到设置</h3>
			<ul class="set-normal-list mb-30">
				<li>
					<span class="label">自主签到</span>
					<p class="desc">{{ datalist.self_check == 1 ? '开启' : '关闭' }}</p>
				</li>
				<li v-if="datalist.self_check === 1">
					<span class="label">签到时间</span>
					<p class="desc" v-if="datalist.check_in_type1 === 1">课程当天，会员可随时签到</p>
					<p class="desc" v-else-if="datalist.check_in_type1 === 2">课程当天，会员可在课程结束前签到</p>
					<p class="desc" v-else-if="datalist.check_in_type1 === 3">
						课程当天，会员可在课程结束后 {{datalist.check_front_minute1}}分钟内签到</p>
				</li>
				<li>
					<span class="label">扫码签到</span>
					<p class="desc">{{ datalist.scan_check == 1 ? '开启' : '关闭' }}</p>
				</li>
				<li v-if="datalist.scan_check === 1">
					<span class="label">签到时间</span>
					<p class="desc" v-if="datalist.check_in_type == 1">课程当天，会员可签到两小时内开始的课程</p>
					<p class="desc" v-else-if="datalist.check_in_type == 2">课程当天，会员可在课程结束前扫码签到</p>
					<p class="desc" v-else-if="datalist.check_in_type == 3">
						课程当前，开课{{datalist.check_front_minute}}分钟前{{datalist.check_after_minute}}分钟后签到</p>
				</li>
			</ul>
			<div class="setting-tips__normal mb-15">
				<svg-icon icon-class="tishi" class="mar0" style="width: 16px;height: 16px;" />
				<span>预约取消设置仅针对会员支付的约课，无卡支付的约课暂不支持会员自主预约取消</span>
			</div>
			<h3 class="title">预约取消设置</h3>
			<ul class="set-normal-list mb-30">
				<li>
					<span class="label">自主取消</span>
					<p class="desc">{{datalist.self_cancel == 1 ? '开启' : '关闭'}}</p>
				</li>
				<li v-if="datalist.self_cancel === 1">
					<span class="label">取消时间</span>
					<p class="desc" v-if="datalist.self_cancel_type == 1">会员自主取消不晚于开课前{{datalist.cancel_front_minute}}分钟
					</p>
					<p class="desc" v-else-if="datalist.self_cancel_type == 2">
						会员自主取消不晚于开课后{{datalist.cancel_start_minute}}分钟</p>
					<p class="desc" v-else-if="datalist.self_cancel_type == 3">
						会员自主取消不晚于课程结束后{{datalist.cancel_after_minute}}分钟</p>
				</li>
			</ul>
			<h3 class="title">私教教室设置</h3>
			<ul class="set-normal-list mb-30">
				<li>
					<span class="label">自动分配</span>
					<p v-if="datalist.classroom === 1" class="desc">系统自动为会员分配空闲教室</p>
					<p v-if="datalist.classroom === 2" class="desc">不分配,到店协商</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		ReservationDetail
	} from '@/api/system'
	export default {
		name: 'orderRuleForPrivate',
		components: {},
		data() {
			return {
				datalist: {
					type: 3,
					private_mode: 1,
					res_hour1: 0,
					res_minute1: 0,
					res_hour2: 0,
					res_minute2: 0,
					advance2: 0,
					course_before: 0,
					course_after: 0,
					classroom: 1,
					self_check: 1,
					check_in_type1: 1,
					check_front_minute1: 0,
					scan_check: 1,
					check_in_type: 2,
					check_front_minute: 0,
					check_after_minute: 0,
					self_cancel: 1,
					self_cancel_type: 1,
					cancel_front_minute: 10,
					cancel_start_minute: 0,
					cancel_after_minute: 0
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '通用设置',
				url: '/system/orderRuleForCommon',
				pd: true
			}, {
				name: '团课',
				url: '/system/orderRuleForLeague',
				pd: true
			}, {
				name: '精品课',
				url: '/system/orderRuleForQuality',
				pd: true
			}, {
				name: '私教课',
				url: '/system/orderRuleForPrivate',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 3
			})
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				const params = {
					type: 3
				}
				ReservationDetail(params).then(response => {
					const {
						data
					} = response
					console.log(response)
					if (data) {
						Object.keys(this.datalist).forEach((key) => {
							if (data[key] !== undefined) this.datalist[key] = data[key]
						})
					}
					console.log(data)
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
			open(type) {
				if (type === 'add') {
					this.add_show = false
				}
				if (type === 'update') {
					this.update_show = false
				}
			}

		}
	}
</script>

<style scoped>
	.m-content-box {
		position: relative;
		padding: 30px 63px;
		font-size: 14px;
	}
	
	.top-btn-group {
		position: relative;
		display: flex;
		justify-content: flex-end;
		margin-top: -18px;
		margin-bottom: 12px;
	}
	
	.setting-tips__normal {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}
	
	.m-set-order-box {
		position: relative;
		margin-bottom: 30px;
	}
	
	.mb-30 {
		margin-bottom: 30px;
	}
	
	.tips-icon {
		margin-right: 8px;
	}
	
	img {
		max-width: 100%;
	}
	
	img {
		border: 0;
	}
	
	.m-set-order-box .title {
		position: relative;
		color: #787878;
		font-size: 12px;
		height: 22px;
	}
	
	.set-normal-list li:nth-child(odd) {
		background: #f2f2f2;
	}
	
	.set-normal-list li {
		position: relative;
		min-height: 19px;
		padding: 10px 10px 10px 170px;
	}
	
	.set-normal-list .label {
		position: absolute;
		left: 10px;
		top: 10px;
	}
	
	ul,
	dl,
	ol {
		list-style: none;
		padding: 0;
		margin-top: 0;
	}
	
	p {
		margin: 0;
		padding: 0;
		font-weight: 400;
	}
	
	h3 {
		margin-bottom: 0;
	}
	
	.set-order-edit {
		position: absolute;
		right: 0;
		top: -20px;
	}
</style>